<template>
  <div class="w">
    <div class="bigBox">
      <div class="img">
        <img :src="item.image" alt="" />
      </div>
      <div class="desc">
        <div class="top">
          <strong>{{ item.name }}</strong>
        </div>
        <div class="bottom">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="less" scoped>
.bigBox {
  display: flex;
  border: 0.1vw solid #ccc;
  margin-bottom: 1vw;
  border-radius: 1vw;
  box-shadow: 0 0 0 0 #000;
  //   border-radius: 5px;
background-color: rgba(255, 255, 255, 0.418);
  transition: 0.3s;
  &:hover {
    box-shadow: 2px 3px 4px 3px #08c1e949;
    // border-radius: 5px;
  }
  .img {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 0.1vw solid #ccc;
    width: 8vw;
    height: 8vw;
    padding: 0.5vw;
  }
  .desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.1vw;
    .bottom {
      font-size: 1vw;
      text-indent: 2em;
      line-height: 2vw;
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
</style>